<template>
	<view class="account">
		<view class="account-box">
			<view class="account-logo">
				<image class="logo-img" :src="localIconSrc('logo.png')"></image>
				<view class="logo-text">爱云艺</view>
			</view>
			<view class="account-form">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="accountFormData">
					<uni-forms-item name="account">
						<view class="input-bottom">
						  <uni-easyinput
								:inputBorder="false"
								:styles="styles"
								primaryColor="#999"
								placeholderStyle="font-size: 32rpx;"
								class="input-class"
								v-model="accountFormData.username"
								placeholder="邮箱/会员名/手机号"
						  />
						</view>
					</uni-forms-item>
					<uni-forms-item name="password">
						<view class="input-bottom">
						  <uni-easyinput
								:inputBorder="false"
								:styles="styles"
								:clearable="false"
								primaryColor="#999"
								type="password"
								placeholderStyle="font-size: 32rpx;"
								v-model="accountFormData.password"
								placeholder="请输入登录密码"
							/>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="forget-item">
				<button class="forget-link" @click="toPassword">忘记密码？</button>
				<button class="forget-link" @click="toUsername">忘记会员名？</button>
			</view>
			<button class="login-btn" @click="goAccountLogin">登录</button>
		</view>
	</view>
</template>

<script>
	import { loginByPassword, getEndOpenId, getUserInfo, getTicket } from '@/api/login.js'
	import { getRefreshUser } from '@/api/wallet.js'
	export default {
		data() {
			return {
				rules: {},
				accountFormData: {
					username: '',
					password: ''
				},
				styles: {
					borderColor: 'transparent',
					color: '#999'
				},
				clientId: '073820240321128890',
				clientSecret: 'fa1c7b3f5494bf1c9d1a3e73433a66e6',
			}
		},
		onLoad() {
			console.log('账号登录页面加载')
		},
		methods: {
			toPassword() {
				uni.navigateTo({
					url: '/pages/login/findPassWord/findPassWord'
				})
			},
			toUsername() {
				uni.navigateTo({
					url: '/pages/login/findUsername/findUsername'
				})
			},
			goAccountLogin() {
				console.log('登录')
				const param = {
					"grant_type": 'password',
					"client_id": this.clientId,
					"username": this.accountFormData.username,
					"password": this.accountFormData.password,
					"scope": 'get_user_info'
				};
				loginByPassword(param).then(res => {
					if (res.errcode && res.errcode != 200) {
						uni.showToast({
							title: res.errmsg,
							icon:'none',
							duration:5000
						})
					} else {
						console.log('res', res.access_token)
						uni.setStorageSync('acctoken', res.access_token)
						const data = {
							"access_token": res.access_token
						}
						getEndOpenId(data).then(openIdRes => {
							if (openIdRes.errcode && openIdRes.errcode !=200 ) {
								uni.showToast({
									title:'未知错误('+openIdRes.errcode+')',
									icon:'none',
									duration:5000
								})
							} else {
								const { openid } = openIdRes
								// 储存openId
								uni.setStorageSync('openid', openid)
								const userStr = {
									access_token: uni.getStorageSync('acctoken'),
									appid: this.clientId,
									openid: openid
								};
								getUserInfo(userStr).then(userInfo => {
									console.log('userInfo', userInfo)
									if(userInfo.errcode && userInfo.errcode != 200) {
										uni.showToast({
											title:'未知错误('+userInfo.errmsg+')',
											icon:'none',
											duration:5000
										})
									} else {
										// 储存oauth_consumer_key,登录授权后的签名密钥
										uni.setStorageSync('oauthConsumerKey', userInfo.oauth_consumer_key)
										uni.setStorageSync('portrait', userInfo.portrait)
										let ticketStr = {
											"oauth_consumer_key": userInfo.oauth_consumer_key,
											"appid": this.clientId,
											"openid": openid
										}
										getTicket(ticketStr).then(ticket => {
											console.log(ticket, 'ticket')
											uni.setStorageSync('apiticket', ticket.api_ticket );
											getRefreshUser().then(info => {
												console.log(info, 'info')
											})
											uni.switchTab({
												url: `/pages/home/index`,
											});
										});
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account {
		position: relative;
		width: 100vw;
		height: 100vh;
	}
	.account-box {
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translate(-50%);
		width: 600upx;
		height: 936upx;
		.account-logo {
			margin-bottom: 120upx;
			text-align: center;
			.logo-img {
				width: 192upx;
				height: 192upx;
			}
			.logo-text {
				color: #ff6005;
				font-size: 44upx;
			}
		}
		.forget-item {
			display: flex;
			float: right;
			button {
				width: 160upx;
				padding: 0px;
				background-color: transparent;
			}
			button::after {
				border: none;
			}
			.forget-link {
				color: #999;
				font-size: 24upx;
			}
		}
		.login-btn {
			margin-top: 210upx;
			color: #fff;
			background-color: #ff6005;
			border-radius: 50rpx;
		}
	}
	.input-bottom {
		border-bottom: 1px solid #f0f0f0;
	}
	::v-deep .uni-easyinput__content-input {
		color: #999;
		font-size: 32upx;
	}
</style>